<template>
  <div class="cart">
    <h2>购物车</h2>
    <van-swipe-cell v-for="item in list" :key="item.id" class="card-container">
      <div class="card-show">
        <div class="checkBox">
          <input type="checkbox" v-model="item.ischecked" />
        </div>
        <van-card
          :title="item.goods_name"
          :thumb="item.list_pic_url"
          class="card"
        >
          <template #price> ￥{{ item.retail_price }} </template>
          <template #num>
            <van-stepper
              v-model="item.number"
              integer
              @plus="add(item)"
              @minus="reduce(item)"
              @blur="change(item, $event)"
              @focus="getNum"
            />
          </template>
        </van-card>
      </div>
      <template #right class="del">
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <div class="footer">
      <van-checkbox v-model="isallchecked">全选</van-checkbox>
      <p>合计:{{ total }}</p>
      <button @click="buy">下单</button>
    </div>
  </div>
</template>

<script>
import { cart, addCart,submitAction } from "@/axios/index";
export default {
  name: "cartPage",

  data() {
    return {
      list: [],
      num: "",
    };
  },
  computed: {
    isallchecked: {
      get() {
        return this.list.every((el) => el.ischecked);
      },
      set(val) {
        // console.log(val);
        this.list.forEach((el) => (el.ischecked = val));
      },
    },
    total() {
      return this.list.reduce((total, current) => {
        if (current.ischecked) {
          return total + current.number * current.retail_price;
        } else {
          return total;
        }
      }, 0);
    },
  },
  created() {
    this.init();
  },
  mounted() {},

  methods: {
    async init() {
      let res = await cart({ openId: localStorage.getItem("openId") });
      console.log(res.data);
      res.data.forEach((el) => (el.ischecked = false));
      this.list = res.data;
      console.log(this.list);
    },
    reduce(obj) {
      let newObj = {
        goodsId: obj.goods_id,
        number: -1,
        openId: localStorage.getItem("openId"),
      };
      addCart(newObj);
    },
    add(obj) {
      let newObj = {
        goodsId: obj.goods_id,
        number: 1,
        openId: localStorage.getItem("openId"),
      };
      addCart(newObj);
    },
    getNum(e) {
      // console.log(e.target._value);
      this.num = e.target._value;
    },
    change(obj, e) {
      addCart({
        goodsId: obj.goods_id,
        number: -this.num,
        openId: localStorage.getItem("openId"),
      });
      addCart({
        goodsId: obj.goods_id,
        number: e.target._value,
        openId: localStorage.getItem("openId"),
      });
    },
    buy() {
      if (this.list.some((el) => el.ischecked)) {

        let obj={};
        obj.allPrise=this.total;
        obj.openId=localStorage.getItem("openId");
        let str=this.list.map(el=>{
            if(el.ischecked){
                return el.goods_id
            }
        }).join(',')
        obj.goodsId=str;
        // console.log(obj);
        // 提交订单
        submitAction(obj)
        // 跳转到支付界面
        this.$router.push({name:'pay'})
        // 删除该商品
      } else {
        this.$toast({
          message: "请至少选择一件商品",
          position: "bottom",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.cart {
  margin-bottom: 100px;

  .card-container {
    .card-show {
      display: flex;
      width: 100%;
      .checkBox {
        width: 10%;
        display: flex;
        input {
          width: 100%;
          justify-content: center;
          align-items: center;
        }
      }
      .card {
        width: 90%;
      }
    }
  }
  .footer {
    position:fixed;
    bottom: 100px;
    background-color: pink;
    display: flex;
    width: 100%;
  }
}
.delete-button {
  height: 100%;
}
</style>